<!DOCTYPE html>
<html>
    <title>task3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .l{
           display：inline-block;
           float: left;
           width: 80px;
           height: 80px;
           background-color: rgb(250, 247, 247);
           margin: 0px;
           top: 0;
           left: 0;
           right: 0;
       }
       p{
           text-align: center;
           vertical-align: middle;
           line-height: 100px;
           margin: 0px;
           padding: 0px;
           font-size:60px;
           font-weight: bolder;
       }
       .o{
          align-items: center;
          display: flex;
          width: 80px;
          height: 80px;
          background-color: rgb(250, 247, 247);
          margin: auto;
          top: 0;
          left: 0;
          right: 0;
      }
    </style>
    <body>
        <div class="o">
            <div class="div1 l">
                <p style="color: lightblue;">G</p>
            </div>
            <div class="div2 l">
                <p style="color: red;">o</p>
            </div>
            <div class="div3 l">
                <p style="color: coral;">o</p>
            </div>
            <div class="div4 l">
                <p style="color: lightblue;">g</p>
            </div>
            <div class="div5 l">
                <p style="color: green;">l</p>
            </div>
            <div class="div6 l">
                <p style="color: red;">e</p>
            </div>
        </div>
    </body>
</html>